<template>
  <div>
    <h1>插槽</h1>
    <h2>默认插槽</h2>
    <div>
      <child1>提交</child1>
      <child1></child1>
    </div>

    <h2>具名插槽</h2>
    <child2>
      <template #header>
        <div>header</div>
      </template>
      <template #main>
        <div>main</div>
      </template>

      <div>default</div>

      <template #footer> <div>footer</div> </template>
    </child2>

    <h2>作用域插槽</h2>
    <child3>
      <template v-slot="{ user: { name, age } }">
        <p>用户姓名：{{ name }}</p>
        <p>用户年龄{{ age }}</p>
      </template>
      <template #person="{ user: { name, age } }">
        <p>用户姓名：{{ name }}</p>
        <p>用户年龄{{ age }}</p>
      </template>
    </child3>

    <h2>动态插槽</h2>
    <child3>
      <template v-slot:[dynamicSlotName]="{ user: { name, age } }">
        <p>用户姓名：{{ name }}</p>
        <p>用户年龄{{ age }}</p>
      </template>
    </child3>
  </div>
</template>

<script>
import child1 from './components/child1.vue'
import child2 from './components/child2.vue'
import child3 from './components/child3.vue'
export default {
  name: 'chacao',
  components: {
    child1,
    child2,
    child3
  },
  data() {
    return {
      dynamicSlotName: 'person'
    }
  }
}
</script>

<style lang="scss" scoped></style>
